<template>
    <div id="searchContent" class="boxShadow-white animate__animated animate__fadeIn" style="animation-duration: 200ms">
      <div id="searchRes" v-if="searchInputVal === ''">
        <div id="searchRecord">
          <p>搜索记录</p>
          <ul><li v-for="(record,index) in searchRecord" :key="index+'index'">{{record.recordContent}}<div><svg t="1622456329698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2345" width="10" height="10"><path d="M574.55 522.35L904.4 192.5c16.65-16.65 16.65-44.1 0-60.75l-1.8-1.8c-16.65-16.65-44.1-16.65-60.75 0L512 460.25l-329.85-330.3c-16.65-16.65-44.1-16.65-60.75 0l-1.8 1.8c-17.1 16.65-17.1 44.1 0 60.75l329.85 329.85L119.6 852.2c-16.65 16.65-16.65 44.1 0 60.75l1.8 1.8c16.65 16.65 44.1 16.65 60.75 0L512 584.9l329.85 329.85c16.65 16.65 44.1 16.65 60.75 0l1.8-1.8c16.65-16.65 16.65-44.1 0-60.75L574.55 522.35z" p-id="2346"></path></svg></div></li></ul>
        </div>
        <div></div>
      </div>
      <div id="hotSearch" v-if="searchInputVal === ''">
        <p>热门</p>
        <div class="hotSearch" v-for="gameTop in gameList.slice(0,3)" :key="gameTop.gameId+'game'">
          <a :href="'/home/game/'+gameTop.gameNameEn"><ul><li>{{gameTop.gameName}}</li></ul></a>
        </div>
        <div class="hotSearch" v-for="movieTop in movieList.slice(0,3)" :key="movieTop.movieId+'movie'">
          <a :href="'/home/movie/'+movieTop.movieNameEn"><ul><li>{{movieTop.movieName}}</li></ul></a>
        </div>
        <div class="hotSearch" v-for="musicTop in musicList.slice(0,3)" :key="musicTop.musicId+'music'">
          <a :href="'/home/music/'+musicTop.musicNameEn"><ul><li>{{musicTop.musicName}}</li></ul></a>
        </div>
      </div>
      <div id="getSearch" v-if="searchInputVal !== ''">
        <p>搜索结果</p>
        <div v-for="searchGame in searchContentGame.slice(0,3)" :key="searchGame.gameId+'game_'">
          <a :href="'/home/game/'+searchGame.gameNameEn"><ul><li><span style="margin-right: 5px">{{searchGame.gameName}}</span><span class="labInfo" v-for="tags in (searchGame.gameTags || ' ').split(' ')" :key="tags.id">{{tags}}</span></li></ul></a>
        </div>
        <div v-for="searchMovie in searchContentMovie.slice(0,3)" :key="searchMovie.movieId+'movie_'">
          <a :href="'/home/movie/'+searchMovie.movieNameEn"><ul><li><span style="margin-right: 5px">{{searchMovie.movieName}}</span><span class="labInfo" v-for="tags in (searchMovie.movieGen || ' ').split(' ')" :key="tags.id">{{tags}}</span></li></ul></a>
        </div>
        <div v-for="(searchMusic,index) in searchContentMusic.slice(0,3)" :key="index+'music_'">
          <a :href="'/home/music/'+searchMusic.musicNameEn"><ul><li><span style="margin-right: 5px">{{searchMusic.musicName}}</span><span class="labInfo" v-for="tags in (searchMusic.musicGen || ' ').split(' ')" :key="tags.id">{{tags}}</span></li></ul></a>
        </div>
        <span style="padding-left: 10px" v-if="searchContentGame.length === 0 && searchContentMovie.length === 0 && searchContentMusic.length === 0">无搜索结果...</span>
      </div>
    </div>
</template>

<script>
  import api from "../../model/api";
  import $ from "jquery";
    export default {
      name: "searchContent",
      props:['searchInput'],
      data(){
        return{
          gameList:[],
          movieList:[],
          musicList:[],
          searchContentGame:[],
          searchContentMovie:[],
          searchContentMusic:[],
          searchInputVal:'',
          searchRecord:[{
            recordContent:'测试1'
          }]
        }
      },
      watch:{
        searchInput:function (val) {
          this.searchInputVal = val
          this.getGameSearch(val)
          this.getMovieSearch(val)
          this.getMusicSearch(val)
        }
      },
      created() {
        this.getGameTop()
        this.getMovieTop()
        this.getMusicTop()
      },
      methods:{
          getGameTop(){
            api.getGameTop().then( res =>{
              this.gameList = res.data
            })
          },
        getMovieTop(){
          api.getMovieTop().then( res =>{
            this.movieList = res.data
          })
        },
        getMusicTop(){
          api.getMusicTop().then( res =>{
            this.musicList = res.data
          })
        },
        async getGameSearch(input){
            const {data:res} = await this.$axios.post('v1/getSearchGame',{gameName:input})
          if(res.code === 200){
            this.searchContentGame = res.data
          }
        },
        async getMovieSearch(input){
          const {data:res} = await this.$axios.post('v1/getSearchMovie',{movieName:input})
          if(res.code === 200){
            this.searchContentMovie = res.data
          }
        },
        async getMusicSearch(input){
          const {data:res} = await this.$axios.post('v1/getSearchMusic',{musicName:input})
          if(res.code === 200){
            this.searchContentMusic = res.data
          }
        },
      }
    }
</script>

<style lang="less" scoped>
  #searchContent{
    width: 100%;
    /*height: 200px;*/
    position: absolute;
    top: 45px;
    border-radius: 6px;
    overflow: hidden;
    display: none;
    padding: 10px;
    box-sizing: border-box;
    .labInfo{
      /*margin-left: 5px;*/
      padding: 2px;
      font-size: 12px;
    }
    p{
      font-size: 20px;
      padding-left: 10px;
    }
    span{
        color: var(--theme-fontMain);
    }
    li{
      /*width: 100%;*/
      /*background-color: #31c27c;*/
      padding: 3px 10px;
      transition: all 0.2s ease-in-out;
      cursor: default;
      border-radius: 6px;
      display: flex;
    }
  }
  #searchRes{
    width: 100%;
    height: 100%;

    svg{
      opacity: 0;
      transition: all 0.2s ease-in-out;
      padding: 1px;
      box-sizing: border-box;
      border-radius: 6px;
    }
    li{
      justify-content: space-between;
    }
    li:hover svg{
      opacity: 1;
    }
    svg:hover{
      background-color: black;
      fill: white;
    }

  }
  #hotSearch{
    /*background-color: blue;*/
    width: 100%;
    height: 100%;
    overflow: hidden;

  }
  #getSearch{
    width: 100%;
  }

</style>
